﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DjBlog.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <meta name="keywords" content="js,web,css,css3,html5,c#,前端开发,设计,摄影" />
	<meta name="description" content="阿拉神丁是一个集创意设计、用户体验、互联网技术与网络营销的BLOG。" />
    <title>阿拉神丁</title>
    <link href="/css/reset.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body{background:#ffffff;font: 9pt/1.5 'Levenim MT',Arial,sans-serif; width: 960px; margin: 0px auto 0px;}
        div{height:100px;}
        ul, ol{list-style: none;list-style-type: none;padding:25px;float:right;}
        a, a:visited, a:hover{display: block;text-decoration: none;color: #FFFFFF;outline: 0 none; width: 61px;height: 60px;z-index: 2;overflow: hidden;position: relative;text-align:center; padding-top:10px; }
        li{float: left;width: 61px;height: 92px; margin-left: 50px;position: relative;}
        #nav-shadow li.chang-one a{background: url(/image/site/1.jpg) no-repeat top;}
        #nav-shadow li.chang-two a{background: url(/image/site/2.jpg) no-repeat top;}
        #nav-shadow li.chang-three a{background: url(/image/site/3.jpg) no-repeat top;}
        #nav-shadow li.chang-four a{background: url(/image/site/4.jpg) no-repeat top;}
        #nav-shadow li.chang-five a{ background: url(/image/site/5.jpg) no-repeat top;}
        #nav-shadow li img.shadow{margin: 0 auto;position: absolute; bottom: 0px; left: 0px;z-index: 1;}
        #content{ width:840px; height:320px; background:#ffffff url('/image/site/banner.png') no-repeat -80px -140px ; text-indent:-999px;}
        #bottom {float: right; padding: 0 0 0 20px;text-align: left; width: 47.8%;}
        .alignright{ float:right;}
        #bottom p,#bottom p a{ font-size:12px; line-height:180%; color:#6C8318;}        
        #fotter{clear:both;float:right;display:block;height:20px;text-align: right;margin:70px 0 0; }
        #fotter p {color: #003366;font-family: SimSun,sans-serif;}
    </style>
    <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-23507174-1']);
        _gaq.push(['_trackPageview']);

        (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
    </script>
</head>
<body>
     <div id="head">
        <ul id="nav-shadow">
            <li class="chang-one"><a href="/" title="reflaction_one">Home</a></li>
            <li class="chang-two"><a href="/blog" title="reflaction_two">Blog</a></li>
            <li class="chang-three"><a href="/photo" title="reflaction_three">Photo</a></li>
            <li class="chang-four"><a href="/about" title="reflaction_four">About</a></li>
            <li class="chang-five"><a href="/feed" title="reflaction_five">Rss</a></li>
        </ul>
    </div>
    <div id="content"><h1>阿拉神丁</h1></div>
    <div id="bottom">
		    <img alt="" src="/image/site/jqm.png" class="alignright" alt="" />
		    <p>　　Hi~这里是阿拉神丁的小站，欢迎大家光临我的Blog,这里分享着我一些前端开发和摄影中的作品及心得，希望能和各位GGMM多多交流。</p>
		    <p><a href="/blog">　More</a></p>
    </div>
    <div id="fotter"><p>Copyright©2011 阿拉神丁(alashending.com)</p></div>
    <script type="text/javascript" src="/js/jquery-1.5.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#nav-shadow li").append('<img class="shadow" src="/image/site/reflaction_pic.jpg" width="60" height="32"  alt="" />');
            $("#nav-shadow li").hover(function() {
                var that = $(this);
                that.find("a").stop().animate({ marginTop: '-14px' }, 250, function() {
                    that.find("a").animate({ marginTop: '-10px' }, 250);
                });
                that.find("img.shadow").stop().animate({ width: '80%', opacity: '0.3', marginLeft: '8px' }, 250);
            }, function() {
                var that = $(this);
                that.find("a").stop().animate({ marginTop: '4px' }, 250, function() {
                    that.find("a").animate({ marginTop: '0px' }, 250);
                });
                that.find("img.shadow").stop().animate({ width: '100%', opacity: '1', marginLeft: '0px' }, 250);
            });
        });
        
        
    </script>
</body>
</html>
